<template>
	<div class="table-wrapper">
		<div class="search-container">
			<div class="search-wrapper">
				<span class="label">时间类型：</span>
				<el-select size="mini" v-model="params.time_type" placeholder="请选择时间类型" @change="changeTimeType">
					<el-option v-for="item in timeTypeList" :key="item.text" :label="item.text"
						:value="item.value"></el-option>
				</el-select>
			</div>
			<div class="search-wrapper">
				<span class="label">开始时间：</span>
				<el-date-picker size="mini" v-model="params.start_time"
					:type="params.time_type===1?'date':(params.time_type===2?'month':'year')"
					:value-format="params.time_type===1?'yyyy-MM-dd':(params.time_type===2?'yyyy-MM':'yyyy')"
					placeholder="选择开始时间">
				</el-date-picker>
			</div>
			<div class="search-wrapper">
				<span class="label">结束时间：</span>
				<el-date-picker size="mini" v-model="params.end_time"
					:type="params.time_type===1?'date':(params.time_type===2?'month':'year')"
					:value-format="params.time_type===1?'yyyy-MM-dd':(params.time_type===2?'yyyy-MM':'yyyy')"
					placeholder="选择结束时间">
				</el-date-picker>
			</div>
			<div class="search-wrapper">
				<span class="label">食堂：</span>
				<el-cascader size="mini" class="large-select" v-model="params.cant_admin_id" :options="canteenList"
					placeholder="请选择食堂" :props="{ checkStrictly: true, emitPath: false, multiple: true }" collapse-tags
					clearable>
				</el-cascader>
			</div>
		</div>
		<div class="search-container">
			<!--      <div class="search-wrapper">-->
			<!--        <span class="label">商品分类：</span>-->
			<!--        <el-select size="mini" v-model="params.cant_category_id" placeholder="请选择商品分类" @change="changeChartType">-->
			<!--          <el-option v-for="item in cantCategoryList" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
			<!--        </el-select>-->
			<!--      </div>-->
			<div class="search-wrapper">
				<span class="label">统计类型：</span>
				<el-select size="mini" v-model="params.chart_type" placeholder="请选择统计类型" @change="changeChartType">
					<el-option v-for="item in chartTypeList" :key="item.text" :label="item.text"
						:value="item.value"></el-option>
				</el-select>
			</div>
			<div class="search-wrapper" v-if="params.chart_type===1">
				<span class="label">图形类型：</span>
				<el-select size="mini" v-model="graphicsType" placeholder="请选择图形类型">
					<el-option v-for="item in graphicsTypes" :key="item.text" :label="item.text"
						:value="item.value"></el-option>
				</el-select>
			</div>
			<div class="search-wrapper" v-if="params.chart_type===2">
				<span class="label">图形类型：</span>
				<el-select size="mini" v-model="graphicsType" placeholder="请选择图形类型" @change="changeGraphicsType">
					<el-option key="bar" label="柱状图" value="bar"></el-option>
					<el-option key="line" label="折线图" value="line"></el-option>
				</el-select>
			</div>
			<div class="search-wrapper">
				<el-button @click="getCantChart" icon="el-icon-search" size="mini">查询</el-button>
			</div>
		</div>
		<common-chart class="common-chart more-chart" :chart-type="graphicsType" size="big" :data="chart"
			v-if="params.chart_type===1&&option.type===1"></common-chart>
		<common-chart class="common-chart more-chart" :chart-type="graphicsType" size="big" :data="chart1"
			v-if="params.chart_type===2&&option.type===2"></common-chart>
	</div>
</template>

<script>
	import CommonChart from '@/views/pages/components/CommonChart'
	import portal from '@/api/portal'
	export default {
		name: 'CyChart',
		data() {
			return {
				option: {
					type: 1
				},
				params: {
					time_type: 1,
					start_time: null,
					end_time: null,
					cant_admin_id: null,
					cant_category_id: null,
					chart_type: 1
				},
				timeTypeList: [{
						text: '天',
						value: 1
					},
					{
						text: '月',
						value: 2
					},
					{
						text: '年',
						value: 3
					}
				],
				chartTypeList: [{
						text: '数量',
						value: 1
					},
					{
						text: '金额',
						value: 2
					}
				],
				canteenList: [],
				cantCategoryList: [],
				graphicsType: 'bar',
				graphicsTypes: [{
						text: '柱状图',
						value: 'bar'
					},
					{
						text: '折线图',
						value: 'line'
					}
				],
				data: [],
				chart: {
					name: '采购统计分析',
					title: '',
					xAxis: [],
					legend: []
				},
				chart1: {
					name: '采购统计分析',
					series: [],
					tooltip: [],
					legend: []
				},
				colors: ['#FF8955', '#FFD200', '#5d542a', '#EB811A', '#FF5454', '#0120EB', '#eb01d8']
			}
		},
		components: {
			CommonChart
		},
		created() {
			this.getCanteen()
			this.getCantCategory()
		},
		computed: {},
		mounted() {},
		methods: {
			async getCantCategory() {
				const result = await portal.getCanteenCategory()
				if (result.data) {
					result.data.forEach(el => {
						el.label = el.name
						el.value = el.id
					})
					this.cantCategoryList = result.data
				}
			},
			async getCanteen() {
				const result = await portal.getCanteen()
				if (result.data) {
					result.data.forEach(e => {
						e.label = e.name
						e.value = 'level_0_' + e.id
						e.disabled = true
						e.children = e.child
						if (e.children) {
							e.children.forEach(el => {
								el.label = el.name
								el.value = el.id
							})
						}
					})
					this.canteenList = result.data
				}
			},
			changeChartType() {
				this.graphicsType = 'bar'
				this.option.type = null
				setTimeout(() => {
					this.option.type = this.params.chart_type
				})
			},
			changeTimeType() {
				this.params.start_time = null
				this.params.end_time = null
			},
			changeGraphicsType() {
				this.option.type = null
				setTimeout(() => {
					this.option.type = this.params.chart_type
					this.getCantChart()
				})
			},
			async getCantChart() {
				if (!this.params.chart_type) {
					this.$message.warning('请选择统计类型')
					return
				}
				if (!this.params.time_type) {
					this.$message.warning('请选择时间类型')
					return
				}
				if (!this.params.start_time) {
					this.$message.warning('请选择开始时间')
					return
				}
				if (!this.params.end_time) {
					this.$message.warning('请选择结束时间')
					return
				}
				if (!this.params.cant_admin_id) {
					this.$message.warning('请选择食堂')
					return
				}
				const params = {
					chart_type: this.params.chart_type,
					time_type: this.params.time_type,
					start_time: this.params.start_time,
					end_time: this.params.end_time,
					cant_admin_id: this.params.cant_admin_id && this.params.cant_admin_id.join()
				}
				const res = await portal.getCantChart(params)
				if (res.data) {
					const records = res.data
					const xAxisData = []
					const legend = []
					records.forEach(e => {
						xAxisData.push(e[0].time)
					})
					const series = []
					records[0].forEach((e, index) => {
						legend.push(e.cant_name)
						series.push({
							type: this.graphicsType,
							name: e.cant_name,
							// barWidth: '10%',
							label: {
								show: true,
								position: 'top',
								textStyle: {
									color: '#fff',
									fontSize: 14,
									fontStyle: 'oblique'
								}
							},
							data: records.map(item => item[index].count)
						})
					})
					console.log(xAxisData, this.graphicsType)
					if (xAxisData.length > 4) {
						this.chart.dataZoom = [{
								show: this.graphicsType == 'bar' ? false : true,
								start: 1,
								end: 100,
								height: 20,
							},
							{
								type: 'inside',
								start: 1,
								end: 2
							},
							{
								show: this.graphicsType == 'bar' ? false : true,
								yAxisIndex: 0,
								filterMode: 'empty',
								width: 20,
								height: '80%',
								showDataShadow: false,
								left: '97%'
							}
						]
						this.chart1.dataZoom = [{
								show: this.graphicsType == 'bar' ? false : true,
								start: 1,
								end: 100,
								height: 20,
							},
							{
								type: 'inside',
								start: 1,
								end: 2
							},
							{
								show: this.graphicsType == 'bar' ? false : true,
								yAxisIndex: 0,
								filterMode: 'empty',
								width: 20,
								height: '80%',
								showDataShadow: false,
								left: '97%'
							}
						]
					}
					if (params.chart_type === 1) {
						this.chart.series = series
						this.chart.legend = legend
						this.chart.xAxis = [{
							data: xAxisData
						}]
					} else {
						this.chart1.series = series
						this.chart1.legend = legend
						this.chart1.xAxis = [{
							data: xAxisData
						}]
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">

</style>